<template>
    <div class="register-container">
      <el-form ref="registerForm" :model="registerForm" label-width="100px">
        <el-form-item label="账号">
          <el-input v-model="registerForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="registerForm.isteacher" placeholder="请选择角色">
            <el-option label="老师" value="1"></el-option>
            <el-option label="学生" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="register">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import { ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption } from 'element-plus';
  import { registerUser } from '@/api/user'
  import { ElMessage } from 'element-plus';
  export default {
    components: {
      ElForm,
      ElFormItem,
      ElInput,
      ElButton,
      ElSelect,
      ElOption
    },
    data() {
      return {
        registerForm: {
          username: '',
          password: '',
          isteacher: ''
        }
      };
    },
    methods: {
      register() {
        // 这里添加注册逻辑，比如发送请求到后端API
        console.log('注册信息：', this.registerForm);
        // 可以在这里添加表单验证逻辑
        // 如果验证通过，发送请求到后端
        registerUser(this.registerForm).then((res) => {
    if (res.code == 200) {
      router.replace({ path: '/RootPage' })
      localStorage.setItem('isAuthenticated', 'true')
      console.log(res)
    }else{
      ElMessage("该用户已经存在，请重新输入用户名")
    }
  })
      }
    }
  };
  </script>
  
  <style scoped>
  .register-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  </style>